<template>
    <div>
        <div class="cartbox" >
            <ul class="shoppingUl">
                <li class="sLI" v-for="item,i in shopping" :key="item.id">
                    <input type="checkbox" class="delSelect" v-model="selectindex" :value="i">
                    <span>{{ item.sid }}</span>
                    <span>{{item.sname}}</span>
                    <span>{{ item.sjg}}</span>
                </li>
            </ul>
            <button @click="selectBtn">删除</button>
            <hr>
            <button @click="commenBtn">统计</button>
            <div>选中总价格为：{{ zjg }}</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selectindex:[],
                zjg:0,
                shopping:[
                    {
                        sname:'臭豆腐',
                        sid:1,
                        sjg:15,
                    },  
                    {
                        sname:'榴莲',
                        sid:2,
                        sjg:55,
                    },  
                    {
                        sname:'波罗蜜',
                        sid:3,
                        sjg:22,
                    },  
                    {
                        sname:'臭鸡蛋',
                        sid:4,
                        sjg:5,
                    }
                ]
            }
        },
        methods: {
            selectBtn() {
                console.log(this.selectindex);
                let ins = this.selectindex.sort().reverse()
                ins.forEach(i=>{
                    this.shopping.splice(i,1)
                })
                this.selectindex = []
            },
            commenBtn(){
                let ins = this.selectindex.sort().reverse()
                ins.forEach(item=>{
                    this.zjg += this.shopping[item].sjg
               })
               console.log(this.zjg);

            }
        },
    }
</script>

<style lang="scss" scoped>
.cartbox{
    background-color: red;
    .shoppingUl{
        background-color:gold;
        .sLI{
            border: 1px solid #666;
            display: flex;
            span{
                margin: 5px 10px;
                padding: 0 15px;
            }
            .delSelect{
                margin-left:15px ;
            }
        }
    }
}
</style>